<template>
  <div>
    <el-card v-for="project in projects" :key="project.name">
      <el-row type="flex" align="middle">
        <el-col
          :span="7"
          class="name"
          :style="{fontSize: project.name.length>4? '1.4em': '2em'}"
        >{{ project.name }}</el-col>
        <el-col :span="10" class="fund">
          <el-row>
            <span>{{ project.raised }}元</span>
            <!-- <span class="move">↑+1</span> -->
            <span
              v-if="project.move"
              class="move"
              :style="{color: project.move > 0 ? 'red' : 'green'}"
            >{{ project.move > 0 ? '↑+' : '↓' }}{{ project.move }}</span>
          </el-row>
          <el-row
            class="lastraised"
          >(上轮金额：{{ project.rounds[currentRound] }}, 累计金额：{{ accumulate(project) }}）</el-row>
        </el-col>
        <!-- <el-col>{{ this.detail.already_raised }}</el-col> -->
        <el-col :span="7" class="link">
          <el-row>
            <a :href="URL(project.type, project.id)" target="_blank">支持她</a>
          </el-row>
          <el-row class="backers">（{{ project.backers }}人）</el-row>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import keyBy from "lodash/keyBy";
import sortBy from "lodash/sortBy";
import fund from "../utils/fund";
import { setInterval } from "timers";
export default {
  props: ["members", "currentRound"],
  data() {
    return {
      projects: this.members,
      initiated: false,
    };
  },
  async mounted() {
    this.loadProjectds();
    setInterval(this.loadProjectds, 10000);
  },
  methods: {
    URL: fund.getFundURL,
    accumulate(project) {
      let num = project.rounds.reduce((a,b) => (a+b), project.raised)
      return Math.round(num * 100) / 100
    },
    loadProjectds() {
      Promise.all(
        this.members.map((member) =>
          fund.getFundDetail(member.type, member.id).then((fundDetail) => {
            return { ...member, ...fundDetail };
          })
        )
      ).then((members) => {
        let data = keyBy(members, (m) => m.name);
        this.projects.forEach((p) => {
          p.raised = data[p.name].raised;
          p.backers = data[p.name].backers;
        });
        let sorted = sortBy(this.projects, (p) => -p.raised);
        if (this.initiated) {
          sorted.forEach((p, i) => {
            let move = this.projects.indexOf(p) - i;
            if (move != 0) {
              p.move = move;
            }
            // if (!p.move) {
            //   p.move = 0;
            // }
            // p.move += 1;
            // p.move = Math.round(5 - Math.random() * 10);
          });
        }
        this.projects = sorted;
        this.initiated = true;
      });
    },
  },
};
</script>

<style scoped>
.name {
  font-size: 2em;
  font-weight: bold;
  text-align: justify;
}

.fund {
  font-size: 1.5em;
}

.link {
  text-align: right;
}
.link a {
  font-size: 1.5em;
  /* margin-top: 0.em; */
  color: whitesmoke;
  text-decoration: none;
}

.lastraised,
.backers {
  font-size: 0.5em;
  font-weight: 100;
}

/* .backers {
  margin-right: 0.35em;
} */

.move {
  font-size: 0.5em;
  padding-left: 0.3em;
}
</style>
